<script type="text/javascript" src="/js/duration.js"></script>
<style>
  .topDraw {
    background: linear-gradient(180deg, #df3418 0%, rgba(223, 52, 24, 0) 100%);
    height: 150px;
    width: 100%;
  }

  .canyu-btn {
    width: 100px;
    height: 100px;
    background: linear-gradient(341deg, #df3418 0%, #ff7b65 100%);
    box-shadow: 0px 0px 20px rgba(199, 0, 0, 0.3);
    border-radius: 50%;
    opacity: 1;
    color: white;
    text-align: center;
    position: fixed;
    bottom: 20px;
    left: 50%;
    margin-left: -50px;
  }

  .red {
    color: #b41900;
  }

  .duration {
    background-color: #b41900;
    border-radius: 2px;
    margin-left: 4px;
    margin-right: 2px;
    padding: 1px 4px;
  }

  body {
    background-color: #f1f3f5;
  }
</style>

<div id="app" v-cloak class="relative p2">
  <div class="absolute topDraw z1 left-0 top-0 right-0"></div>

  <div class="mt1 mb2 relative z2 white flex items-center justify-center">
    <div class="duration">{{d.days}}</div>
    <div>日</div>
    <div class="duration">{{d.hours}}</div>
    <div>时</div>
    <div class="duration">{{d.minutes}}</div>
    <div>分</div>
    <div class="duration">{{d.seconds}}</div>
    <div>秒</div>
  </div>
  <div class="relative p2 rounded bg-white z2 mt2">
    <img v-bind:src="draw.photo" style="width: 100%" />
    <div class="py1">{{draw.name}} <span class="gray">x{{draw.stock}}份</span></div>

    <div class="p1 font-12 orange" style="background: #fff8eb; border-radius: 5px">{{draw.desc}}</div>

    <div class="pt1 font-12 center" v-if="!draw.exists">现有积分 {{pointData.point}}</div>
    <div class="pt1 font-12 center red" v-if="draw.status==0 && draw.exists">参与成功，等待开奖</div>
    <div class="pt1 font-12 center red" v-if="draw.status==1">已开奖</div>
  </div>

  <div v-if="draw.status==1">
    <div class="p2 mt2 bg-white rounded">
      <div style="text-align: center" class="font-13 orange">中奖名单</div>

      <div class="center orange p2 font-14" v-if="draw.rewarded" style="background-color: #fff8eb">
        <img src="/img/celebate.svg" style="width: 40px" class="mx-auto block m1" />
        恭喜您获得奖品：{{draw.name}}！
      </div>

      <div class="p1 flex bold font-12" style="color: #9c8484">
        <div style="flex: 1">中奖人员</div>
        <div>中奖奖品</div>
      </div>

      <div class="items-center flex p1 font-13" v-for="user in draw.rewards">
        <!-- <div>
          <img v-bind:src="user.headimgurl" class="circle" style="width: 20px" />
        </div> -->
        <div class="px1" style="flex: 1">{{user.nickname}}</div>
        <div>{{draw.name}}</div>
      </div>
      <div class="center p2 gray" v-if="!draw.users">没有参与记录</div>
    </div>
  </div>

  <div v-if="draw.status!=1">
    <div class="p2 mt2 bg-white rounded">
      <div style="text-align: center" class="font-13 orange">参与记录</div>
      <div class="p1 flex bold font-12" style="color: #9c8484">
        <div style="flex: 1">参与人员</div>
        <div>参与时间</div>
      </div>

      <div class="items-center flex p1 font-13" v-for="user in draw.users">
        <!-- <div>
          <img v-bind:src="user.headimgurl" class="circle" style="width: 20px" />
        </div> -->
        <div class="px1" style="flex: 1">{{user.nickname}}</div>
        <div>{{user.time | timestr}}</div>
      </div>

      <div class="center p2 gray" v-if="!draw.users">没有参与记录</div>
    </div>

    <div class="canyu-btn dim pointer" v-if="!draw.exists && draw.status==0" @click="consumeDraw">
      <div style="margin-top: 30px">参与抽奖</div>
      <div class="font-12">{{draw.point}}积分</div>
    </div>
  </div>

  <!-- <div>{{draw}}</div> -->
</div>
<script>
  dayjs.extend(window.dayjs_plugin_duration)
  var app = new Vue({
    el: "#app",

    data: function () {
      return {
        draw: <% -JSON.stringify(draw) %>,
        pointData: <% -JSON.stringify(pointData || '') %>,
        d: {
          days: '00',
          hours: '00',
          minutes: '00',
          seconds: '00'
        }
      }
    },
    filters: {
      timestr: function (d) {
        return dayjs(d).format("YY-MM-DD HH:mm")
      },
      toFixed: (number) => {
        return number.toFixed(2).replace('.00', "");
      }
    },
    created: function () {
      let that = this;
      let d2 = function (d) {
        if (d < 0) {
          return '00'
        }
        if (d < 10) {
          return '0' + d
        }
        return d
      }
      setInterval(function () {
        let a = dayjs();
        let b = dayjs(that.draw.opentime);
        var duration = dayjs.duration(-a.diff(b))
        that.d = {
          days: d2(duration.get('days')),
          hours: d2(duration.get('hours')),
          minutes: d2(duration.get('minutes')),
          seconds: d2(duration.get('seconds')),
        }
      }, 1000)
    },
    methods: {
      consumeDraw: function () {
        let that = this;
        if (that.loading) {
          return
        }
        that.loading = true
        axios
          .post("/user/consumedraw/" + this.draw._id)
          .then(function (res) {
            that.loading = false
            if (!res.data.status) {
              return weui.topTips(res.data.msg);
            }
            that.pointData.point -= that.draw.point

            location.reload();
          });
      },
    }
  });
</script>